﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UCSlideMain.ascx.cs" Inherits="WebUI.UserControls.UCSlideMain" %>
<link rel="stylesheet" type="text/css" href="Content/adler_slide.css">
<script type="text/javascript" charset="utf-8" src="Content/jquery.easing-1.3.js"></script>
<script type="text/javascript" charset="utf-8" src="Content/jquery.iosslider.min.js"></script>
<div class="fluidHeight">
	<div class="sliderContainer">
		<div class="iosSlider">
			<div class="slider">
				<%--<div class="item">
					<div class="inner">
                    	<img src="Uploads/Slides/h-slider-1.jpg" alt="" style="width:980px; height:445px;" />
						<div class="text1"><span style="color:#000;">MEN'S<br/>NEW ARRIVALS</span></div>
						<div class="text2"><span style="color:#000;">Boots / LunarGrand / Drivers /  Loafers Oxfords / Wingtips / Saddle / Classics</span></div>
                        <div class="buttonview">VIEW »</div>
					</div>
				</div>--%>
				<%=bannerresult%>
			</div>
		</div>
		<div class="slideSelectors">
            <%=bannercnt %>
		</div>
	</div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.iosSlider').iosSlider({
            desktopClickDrag: true,
            snapToChildren: true,
            navSlideSelector: '.sliderContainer .slideSelectors .item',
            onSlideComplete: slideComplete,
            onSliderLoaded: sliderLoaded,
            onSlideChange: slideChange,
            scrollbar: false,
            autoSlide: true,
            autoSlideTimer: 3500,
            infiniteSlider: true
        });
    });

    function slideChange(args) {
        $('.sliderContainer .slideSelectors .item').removeClass('selected');
        $('.sliderContainer .slideSelectors .item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
    }

    function slideComplete(args) {
        if (!args.slideChanged) return false;
        $(args.sliderObject).find('.text1, .text2').attr('style', '');
        $(args.currentSlideObject).find('.text1').animate({
            right: '100px',
            opacity: '0.8'
        }, 400, 'easeOutQuint');
        $(args.currentSlideObject).find('.text2').delay(200).animate({
            right: '70px',
            opacity: '0.8'
        }, 400, 'easeOutQuint');
    }

    function sliderLoaded(args) {
        $(args.sliderObject).find('.text1, .text2').attr('style', '');
        $(args.currentSlideObject).find('.text1').animate({
            right: '100px',
            opacity: '0.8'
        }, 400, 'easeOutQuint');
        $(args.currentSlideObject).find('.text2').delay(200).animate({
            right: '70px',
            opacity: '0.8'
        }, 400, 'easeOutQuint');
        slideChange(args);
    }
</script>